<!DOCTYPE html>
<html lang="en">
<head>
    {{template "macro_head_script" .}}
	<style>
		.pagination a {
			cursor: pointer;
		}
	</style>
</head>
<body>
{{template "macro_header"}}

<div class="container" id="container">
	<div class="row" id="content">
		<div class="form-group">
			<p style="color: red;">注意：每个版本技能名称都可能被暴雪更改，故以下宏命令中的技能需要自己替换成最新的技能名称，游戏中按P键查看技能名称，注意大小括号、逗号、分号等符号的半角全角问题。</p>
		</div>
		<div class="form-group col-sm-12">
			<label for="profession" class="col-xs-12 col-sm-12 col-md-12">选择宏所属职业、专精：</label>
			<select class="form-control" v-on:change="search" id="profession" name="profession_id"
					v-model="select_pid">
				<option value="">
					请选择
				</option>
				<option v-for="item in professions" v-bind:value="item.id">
					${item.name}$
				</option>
			</select>
		</div>
		<div class="form-group col-sm-12">
			<table class="table table-striped col-sm-12">
				<thead>
				<tr>
					<th class="col-md-2 hidden-xs hidden-sm">作者</th>
					<th class="col-md-2 hidden-xs hidden-sm">标题</th>
					<th class="col-md-7 col-xs-12 col-sm-12">宏模板</th>
					<th class="col-md-1 hidden-xs hidden-sm">操作</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="(select_macro,i) in macros" v-bind:key="select_macro.id">
					<td class="col-md-2 hidden-xs hidden-sm">${select_macro.author}$</td>
					<td class="col-md-2 hidden-xs hidden-sm">${select_macro.title}$</td>
					<td class="col-md-7 col-xs-12 col-sm-12">
						<p class="visible-xs">作者：${select_macro.author}$</p>
						<p class="visible-xs">标题：${select_macro.title}$</p>
						<textarea class="form-control" rows="7" v-bind:id="'macro_text_'+i">${select_macro.macro}$</textarea><br>
						<button class="btn btn-default visible-xs visible-sm" v-on:click="copyMacro(i)">复制</button>
					</td>
					<td class="col-md-1 hidden-xs hidden-sm">
						<button class="btn btn-default" v-on:click="copyMacro(i)">复制</button>
					</td>
				</tr>
				</tbody>
			</table>
		</div>

		<div class="col-md-12">
			<nav aria-label="Page navigation">
				<ul class="pagination">
					<li>
						<a id="previous" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li><a id="homepage" flag="1">首页</a></li>
					<li><a style="color: black;">第<span id="currentPage">1</span>页</a></li>
					<li>
						<a id="next" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
    {{template "common_footer"}}
</div>
<br><br><br>
<script>
	function loadPage(pageNo) {
		var pid = document.getElementById("profession").value;
		if (!pid) {
			alert('职业或专精未选择！');
			return false;
		}
		vue.$data.select_macro = [];
		vue.$data.macros = [];

		if (pageNo < 1) {
			pageNo = 1;
		}
		axios.get('/macro/macroList', {
			params: {
				professionId: pid,
				pageNo: pageNo
			}
		})
			.then(function(response) {
				vue.$data.macros = response.data.data;
				if (response.data.data.length > 0) {
					$("#homepage").attr("flag", response.data.pageNo);
					$("#currentPage").text(response.data.pageNo);
				}
			})
			.catch(function(error) {
				console.log(error);
			});
	}

	$(".pagination").hide();

	var vue = new Vue({
		el: "#container",
		delimiters: ['${', '}$'],
		data: {
			professions: [],
			select_pid: '',
			macros: [],
			select_macro: []
		},
		methods: {
			search: function() {
				loadPage(1);
				$(".pagination").show();
			},
			copyMacro: function(id) {
				// console.log(id);
				document.getElementById("macro_text_" + id).select();
				document.execCommand("Copy");
				alert("已复制^-^！");
			}
		}
	});
	$("#previous").click(function() {
		var pageNo = $("#homepage").attr("flag");
		loadPage(parseInt(pageNo) - 1);
		$(this).blur();
	});
	$("#next").click(function() {
		var pageNo = $("#homepage").attr("flag");
		loadPage(parseInt(pageNo) + 1);
		$(this).blur();
	});
	$("#homepage").click(function() {
		loadPage(1);
		$(this).blur();
	});
	axios.get('/macro/professionList', {
		params: {
		}
	})
		.then(function(response) {
			vue.$data.professions = response.data.data;
		});
</script>
</body>
</html>